<template>
	<div class="page-detail">
	    <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
	      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
	      <el-breadcrumb-item :to="{ path: '/investors/capitalList'}">资金帐户列表</el-breadcrumb-item>
	      <el-breadcrumb-item>资金帐户详情</el-breadcrumb-item>
	    </el-breadcrumb>
		<!-- 返回资金帐户明细 -->
		<div class="t_tab">
			<el-form class="form" label-width="180px" :model="params">
				<el-form-item label="投资人">
					<span>张三</span>
				</el-form-item>
				<el-form-item label="投资总额">
					<span>3322</span>
				</el-form-item>
				<el-form-item label="可提现金额">
					<span>1122</span>
				</el-form-item>
				<el-form-item label="已提现金额">
					<span>666</span>
				</el-form-item>
				<el-form-item label="投资余额">
					<span>800</span>
				</el-form-item>
			</el-form>
			<p style="margin: 20px 0 0 0;font-size: 14px;">帐户明细</p>
			<el-form class="form" label-width="180px" :model="params">
				<el-form-item label="初期投资金额">
					<span>233</span>
					<span v-if="showCJ0" @click="showCJFun0" style="margin-left: 20px;color: #0062CC;cursor: pointer;">收起</span>
					<span v-else @click="showCJFun0" style="margin-left: 20px;color: #0062CC;cursor: pointer;">展开</span>
					<el-table v-show="showCJ0" :data="tableData" border style="width: 100%">
						<el-table-column prop="date" label="投资日期">
						</el-table-column>
						<el-table-column prop="id" label="单据编号">
						</el-table-column>
						<el-table-column prop="type" label="单据类型">
						</el-table-column>
						<el-table-column prop="name" label="商品名称">
						</el-table-column>
						<el-table-column prop="number" label="投资数量">
						</el-table-column>
						<el-table-column prop="price" label="投资金额">
						</el-table-column>
					</el-table>
				</el-form-item>
				<el-form-item label="成交">
					<span>1000</span>
					<span v-if="showCJ" @click="showCJFun" style="margin-left: 20px;color: #0062CC;cursor: pointer;">收起</span>
					<span v-else @click="showCJFun" style="margin-left: 20px;color: #0062CC;cursor: pointer;">展开</span>
					<el-table v-show="showCJ" :data="tableData" border style="width: 100%">
						<el-table-column prop="date" label="成交日期">
						</el-table-column>
						<el-table-column prop="id" label="单据编号">
						</el-table-column>
						<el-table-column prop="type" label="单据类型">
						</el-table-column>
						<el-table-column prop="name" label="商品名称">
						</el-table-column>
						<el-table-column prop="user" label="买家">
						</el-table-column>
						<el-table-column prop="number" label="数量">
						</el-table-column>
						<el-table-column prop="price" label="成交价">
						</el-table-column>
					</el-table>
				</el-form-item>
				<el-form-item label="已提现金额">
					<span>666</span>
					<span v-if="showCJ1" @click="showCJFun1" style="margin-left: 20px;color: #0062CC;cursor: pointer;">收起</span>
					<span v-else @click="showCJFun1" style="margin-left: 20px;color: #0062CC;cursor: pointer;">展开</span>
					<el-table v-show="showCJ1" :data="tableData" border style="width: 100%">
						<el-table-column prop="date" label="提现日期">
						</el-table-column>
						<el-table-column prop="number" label="提现金额">
						</el-table-column>
					</el-table>
				</el-form-item>
				<el-form-item label="可提现金额">
					<span>1122</span>
				</el-form-item>
				<el-form-item label="投资余额">
					<span>800</span>
				</el-form-item>
				<el-form-item >
					<el-button size="small" style="width: 300px;" @click="money" type="success">结算</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>

</template>
<script>
	export default {
		name: 'detail',
		data() {
			return {
				showCJ0:true,
				showCJ:false,
				showCJ1:true,
				params: {
					name: '',
					status: 0,
					code: '',
					url: '',
					order: 0,
					zt_state: 0,
					letter: '',
					tel: '',
					discount: 0.00
				},
				tableData: [{
					date: '2016-05-02',
					id:'203843284',
					type:'销售单',
					name:'玫瑰花',
					user: '王小虎',
					number:'22',
					price:'1293'
				},{
					date: '2016-05-02',
					id:'203843284',
					type:'销售单',
					name:'玫瑰花',
					user: '王小虎',
					number:'22',
					price:'1293'
				},{
					date: '2016-05-02',
					id:'203843284',
					type:'销售单',
					name:'玫瑰花',
					user: '王小虎',
					number:'22',
					price:'1293'
				}]
			}
		},
		mounted() {},
		methods: {
			showCJFun0(){
				this.showCJ0 = !this.showCJ0;
			},
			showCJFun(){
				this.showCJ = !this.showCJ;
			},
			showCJFun1(){
				this.showCJ1 = !this.showCJ1;
			},
			money(){
				this.$message.success('结算成功!')
			},
			to() {
				this.$router.back();
			}
		}
	}
</script>
<style lang="less">
	.form {
		border-bottom: 1px solid #eee;
	}
	
	.page-detail {
		width: 1000px;
		.t_tab {
			border-top:1px solid #eee;
			.t_title {
				color: #333;
				border-bottom: 1px solid #dddddd;
				overflow: hidden;
				line-height: 20px;
				span {
					float: left;
					color: #333;
				}
				.t_m {
					width: 135px;
					height: 32px;
					border: 1px solid #ff920b;
					border-radius: 4px;
					font-size: 12px;
					font-weight: normal;
					cursor: pointer;
					color: #FFF;
					line-height: 32px;
					text-indent: 30px;
				}
			}
		}
	}
</style>